<template>
  <div class="v-button">
    <el-button :type="type" :style="{ width: `${width}px`, height: `${height}px` }" :disabled="disabled" @click="confirm">
      <slot name="iconBefore"></slot>
      {{ btnText }}
      <slot name="iconAfter"></slot>
    </el-button>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    name: 'v-button',
    props: {
      type: {
        type: String,
        default: 'primary'
      },
      // 按钮文案
      btnText: {
        type: String,
        default: '确认'
      },
      // 宽度
      width: {
        type: Number,
        default: 300
      },
      // 高度
      height: {
        type: Number,
        default: 30
      },
      // 禁止点击
      disabled: {
        type: Boolean,
        default: false
      }
    },
    data () {
      return {}
    },
    methods: {
      confirm () {
        this.$emit('on-click')
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  .v-button
    display inline-block
    .el-button
      padding 0
</style>
